<template>
  <div class="element-carousel">
    <h2>基本日历</h2>
    <el-calendar v-model="baseCalendar"></el-calendar>
    <h2>自定义内容</h2>
    <el-calendar>
      <template #dateCell="{data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{
            data.day
              .split('-')
              .slice(1)
              .join('-')
          }}
          {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
    <h2>自定义范围</h2>
    <!-- <el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 9)]"></el-calendar> -->
    <el-calendar :range="calendarRange"></el-calendar>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'ElementCalendar',
  setup() {
    let baseCalendar = ref(new Date())
    const calendarRange = [new Date(), new Date(+new Date() + 6 * 24 * 60 * 60 * 1000)]
    return {
      baseCalendar,
      calendarRange
    }
  }
}
</script>
<style lang="scss">
.element-carousel {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
  .is-selected {
    color: #1989fa;
  }
}
</style>
